<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<title>图说北京</title>
<link href="${resPath}/sdzc/css/ts-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.beijing.gov.cn/images/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${resPath}/sdzc/js/tsdh.js"></script>
<script type="text/javascript" src="${resPath}/sdzc/js/ts-bigpicroll.js"></script>

</head>

<body style="background:#2e231b;">
<style>
    .crumbsBox{width: 1200px; margin: 0 auto; }
    .crumbsBox .crumbs{height: 64px; margin: 0 auto;}
    #breadcrumb{width: 100%; line-height: 56px; font-size: 14px; color: #919191;}
    #breadcrumb a{color: #919191;}
    .repeatX{width: 100%; height: 8px;}
	#play .img_ul li .ts-zh{background-color:rgba(0,0,0,0.8);}
	#u-phone-tip
	{
		width:110%;
	        margin-left:-10%;
		height:100%;
		animation:mymove 1s infinite;
		-webkit-animation:mymove 1s infinite; /*Safari and Chrome*/
		 background: url('http://www.beijing.gov.cn/images/ts-shouzhi.png') no-repeat 50% 50%;
		position: absolute;
		z-index: 999;
	background-color:rgba(0,0,0,0.8);
	}
	
	\@keyframes mymove
	{
		from {left:0px;}
		to {left:20px;}
	}
	
	\@-webkit-keyframes mymove /*Safari and Chrome*/
	{
		from {left:0px;}
		to {left:20px;}
	}
	#play .prev_a,#play .change_a{top:35%;}
	.slider-yd{display:none}
	#play .img_ul li img{text-align: center; display: block; margin: 0 auto;}
	#play .img_ul h4{ margin:70px 0 15px 0; font-size:26px; border-bottom:1px solid #919191; font-weight:normal; padding:0 0px ; width:1000px; margin-left:0px; color:#fff; padding-bottom:20px; height:45px;position: absolute;margin-top: 30px;}
	#play .img_ul h4 em{ font-style:normal; float:left;}
	#play .img_ul h4 span{ color:#919191; float:right; font-size:16px; line-height:50px;}
	#play .img_ul li h5{ position: absolute;margin-top: 100px;}
	\@media only screen and (max-width: 414px) {
	 .crumbsBox{width: 100%; display: none;}
	        .crumbsBox .crumbs{width: 97%;}
	        .crumbs{height: auto !important;}
		.slider-yd h4{ width:90%; margin:0 auto; padding:10px 0; margin-left:5%;}
		.slider-yd h4 em{ font-size:20px; line-height:45px;}
		.slider-yd h4 span{ line-height:45px;}
		.slider-yd li h5{ font-size:16px; width:90%; font-size:14px; line-height:20px; margin-top: 20px; color:#919191;font-size: 14px;font-weight:normal; margin-left:4%;}
	.slider-yd li .ts-zh{position:absolute; z-index:9999; display:block; width:100%; height:100%; background:url(http://www.beijing.gov.cn/images/ts-img-yd-7.png) 130px 100px no-repeat;background-color:rgba(0,0,0,0.8); top:0;}
	.slider-yd{display:block;width: auto;margin: 40px auto 0 auto;overflow: hidden; height:750px;}
	#play {display:none}
	.focus{display:none}
	
	}
	\@media only screen and (max-width: 750px) {
	padding:5% 5.5% 2% 3%;
	}
</style>

<!--图片轮换开始-->
<script src="${resPath}/sdzc/js/ts-jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<div class="ts-play-bd">
<div id="play">
<ul class="img_ul" style="margin-bottom: 230px;">
<li><img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939320556.jpg"><h5>1</h5></li>
<li><img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939462148.jpg"><h5>2</h5></li>
<li><img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939590399.jpg"><h5>3</h5></li>
<li><img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939721099.jpg"><h5>4</h5></li>
<li><img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394940146154.jpg"><h5>5</h5></li>
<li>
<a class="img_a"><img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939320556.jpg"></a>
<a href="#" target="_blank" class="ts-zh"></a>
</li>
<h4><em>标题</em><span>副标&nbsp;&nbsp;2020-10-10</span></h4>
</ul>  
<a href="javascript:void(0)" class="prev_a change_a" title="上一张"> </a>
<a href="javascript:void(0)" class="next_a change_a" title="下一张"> </a>
</div>
  
</div>

<script>
	var i=0; //图片标识
var img_num=$(".img_ul").children("li").length; //图片个数
$(".img_ul li").hide(); //初始化图片	
play();
$(function(){
	 $(".img_hd ul").css("width",($(".img_hd ul li").outerWidth(true))*img_num); //设置ul的长度
	 
	 $(".bottom_a").css("opacity",0.7);	//初始化底部a透明度
	 //$("#play").css("height",$("#play .img_ul").height());
	 if (!window.XMLHttpRequest) {//对ie6设置a的位置
	 $(".change_a").css("height",$(".change_a").parent().height());}
	 $(".change_a").focus( function() { this.blur(); } );
	 $(".bottom_a").hover(function(){//底部a经过事件
		 $(this).css("opacity",1);	
		 },function(){
		$(this).css("opacity",0.7);	 
			 });
	 $(".change_a").hover(function(){//箭头显示事件
		 $(this).children("span").show();
		 },function(){
		 $(this).children("span").hide();
			 });
	 $(".img_hd ul li").click(function(){
		 i=$(this).index();
		 play();
		 });
	 $(".prev_a").click(function(){
		 //i+=img_num;
		 i--;
		 //i=i%img_num;
		 i=(i<0?0:i);
		 play();
		 }); 
	 $(".next_a").click(function(){
		 i++;
		 //i=i%img_num;
		 i=(i>(img_num-1)?(img_num-1):i);
		 play();
		 }); 
	 }); 
function play(){//动画移动	
	var img=new Image(); //图片预加载
	img.onload=function(){img_load(img,$(".img_ul").children("li").eq(i).find("img"))};
	img.src=$(".img_ul").children("li").eq(i).find("img").attr("src");
	//$(".img_ul").children("li").eq(i).find("img").(img_load($(".img_ul").children("li").eq(i).find("img")));
	
	$(".img_hd ul").children("li").eq(i).addClass("on").siblings().removeClass("on");
	if(img_num>7){//大于7个的时候进行移动
		if(i<img_num-3){ //前3个
		$(".img_hd ul").animate({"marginLeft":(-($(".img_hd ul li").outerWidth()+4)*(i-3<0?0:(i-3)))});
		}
		else if(i>=img_num-3){//后3个
			$(".img_hd ul").animate({"marginLeft":(-($(".img_hd ul li").outerWidth()+4)*(img_num-7))});
			}
	}
	if (!window.XMLHttpRequest) {//对ie6设置a的位置
	$(".change_a").css("height",$(".change_a").parent().height());}
	}
function img_load(img_id,now_imgid){//大图片加载设置 （img_id 新建的img,now_imgid当前图片）
    
    if(img_id.width/img_id.height>1)
	{
		if(img_id.width >=$("#play").width()) $(now_imgid).width($("#play").width());
		}
	else {
		if(img_id.height>=500) $(now_imgid).height(500);

		}
		$(".img_ul").children("li").eq(i).show().siblings("li").hide(); //大小确定后进行显示
	}
function imgs_load(img_id){//小图片加载设置
	if(img_id.width >=$(".img_hd ul li").width()){img_id.width = 80};
	//if(img_id.height>=$(".img_hd ul li").height()) {img_id.height=$(".img_hd ul li").height();}
	}
	</script>
    
    <!--移动端图片轮换结束-->

   <div class="zzsc-container" style="min-height: 630px;">
<h4 style="margin: 40px 15px 10px 15px;border-bottom: 1px solid #919191;padding-bottom: 10px;"><em style="display: block;font-style: normal;color: #fff;margin-bottom: 5px;">
标题</em><span style="font-size: 14px;color: #919191;">副标题&nbsp;&nbsp;2020-10-10</span></h4>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				    <!-- Swiper -->
				    <div class="swiper-container">
				        <div class="swiper-wrapper">
<div id="u-phone-tip"></div>
<div class="swiper-slide">
<img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939320556.jpg">
<p>1</p>
</div>
<div class="swiper-slide">
<img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939462148.jpg">
<p>2</p>
</div>
<div class="swiper-slide">
<img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939590399.jpg">
<p>3</p>
</div>
<div class="swiper-slide">
<img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939721099.jpg">
<p>4</p>
</div>
<div class="swiper-slide">
<img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394940146154.jpg">
<p>5</p>
</div>
<div class="swiper-slide"><a class="img_a"><img src="http://www.beijing.gov.cn/tsbj/sys/zcs/202007/W020200711394939320556.jpg"></a>
<a href="#/>" target="_blank" class="ts-zh"></a></div>
				        </div>

				    </div>
				</div>
				
			</div>
		</div>
	</div>
   
<link rel="stylesheet" type="text/css" href="${resPath}/sdzc/css/bootstrap-2.min.css" >
<link rel="stylesheet" type="text/css" href="${resPath}/sdzc/css/zzsc-demo-2.css" >
<link rel="stylesheet" href="${resPath}/sdzc/css/swiper-2.min.css" >
<script src="${resPath}/sdzc/js/swiper-2.min.js"></script>
 <style>
img{width:auto;height:auto;}
	    .swiper-container {
	      width: 100%;
        	height: auto;
	    }
	    .swiper-slide {
	        text-align: center;
	        font-size: 18px;
	    }
	    .swiper-container .swiper-slide {
	        height: auto;

	    }
	    .swiper-container .swiper-slide:nth-child(2n) {
	        height: auto;

	    }

.zzsc-container{display:none}
@media only screen and (max-width: 414px) {
.zzsc-container{display:block}
.swiper-container .swiper-slide p{font-size:16px; width:100%; font-size:16px; line-height:22px; color:#919191;font-size: 16px;font-weight:normal;text-align:left;margin-top:5px;}
.swiper-container-autoheight .swiper-wrapper{margin-top:20px;margin-bottom:120px; padding-bottom:40px;}
.swiper-container .swiper-slide .ts-zh{position:absolute; z-index:9999; display:block; width:100%; height:100%; background:url(http://www.beijing.gov.cn/images/ts-img-yd-7.png) 50% 50% no-repeat;background-color:rgba(0,0,0,0.8); top:0;}
.swiper-container .swiper-slide p{font-size:16px; width:100%; font-size:16px; line-height:22px; padding-top: 20px;padding-bottom: 30px; color:#919191;font-size: 16px;font-weight:normal;text-align:left;z-index: 9999;position: absolute;background: #2e231b;}
img{width:100%;height:100%;}
}
	    </style>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        autoHeight: true, //enable auto height
    });
    </script>
<script type="text/javascript">
   $(function(){

         $("#u-phone-tip").show().delay(2000).hide(50);
   })
</script>
<!--图片轮换结束-->

</body>
</html>
